<template>
  <div>
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
      :with-header="false"
    >
      <div class="drawer_box">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img
              class="drawer_t_l_img"
              src="/static/skin/herodoo/main/platform/home/img/quanyishaixuan.png"
              alt=""
            />
            创作精品礼包
          </div>

          <img
            class="drawer_t_r"
            src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
            alt=""
            @click="drawer = false"
          />
        </div>
        <div class="created_content">
          <div class="created_content_list">
            <!-- 权益组合 -->
            <div class="block_box">
              <div class="title">
                权益组合
                <el-tooltip placement="bottom-start">
                  <div slot="content">
                    权益选择规则:<br />
                    1、自有权益选择数+已购买权益选择数必须大于等于2<br />
                    2、若未选择已购买权益，则自有权益选择数必须大于等于2
                  </div>
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </div>
              <div class="list_box" v-if="ownList.length">
                <div class="left">已选自有权益:</div>
                <div class="right">
                  <div
                    style="display:flex;width: 100%;"
                    v-for="item in ownListShow"
                    :key="item.id"
                  >
                    <div class="list1">
                      <div class="item1">
                        <i
                          @click="removeOwnList(item.ID)"
                          class="el-icon-remove"
                          style="color:#ED5757;font-size: 3rem;"
                        ></i>
                      </div>
                    </div>
                    <div
                      style="padding:1.3rem;background: #FFFFFF;box-shadow: 2px 1px 9px 0px rgba(180,171,206,0.25);border-radius: 18px 18px 18px 18px;width: 100%;margin-bottom: 1.3rem;"
                    >
                      <div class="list">
                        <div class="item">
                          <div
                            style="width: 30%;height: 100%;margin-right: 2%;"
                          >
                            <img
                              style="width: 100%;height: 100%;border-radius: 8px;"
                              :src="JSON.parse(item.MainPicturePath)[0].url"
                              :alt="JSON.parse(item.MainPicturePath)[0].name"
                            />
                          </div>
                          <div
                            style="display: flex;flex-direction: column;justify-content: space-between;width:68%;"
                          >
                            <div>
                              <p
                                style="font-size:2rem;color:#1E1B19;line-height:3rem;font-weight: 600;"
                              >
                                {{ item.Name }}
                              </p>
                              <div>
                                <span
                                  v-for="item1 in item.EquityFlagListName"
                                  style="padding:4px;border-radius: 2px 2px 2px 2px;border:1px solid #426CE9;display:inline-block;
                                                        font-size:1rem;line-height:1rem;color:#426CE9;margin-right: 0.4rem;"
                                  >{{ item1 }}</span
                                >
                              </div>
                            </div>
                            <div
                              style="display: flex;justify-content: space-between;"
                            >
                              <div>
                                <span
                                  style="font-size:1.2rem;color:#827070;margin-right:2.7rem;"
                                  >库存：{{ item.InventoryQuantity }}份</span
                                >
                                <span
                                  style="font-size:1.2rem;color:#827070;margin-right:2.7rem;"
                                  >已售：{{ item.SoldQuantity }}份</span
                                >
                              </div>
                              <div
                                style="margin-right:1.2rem;font-size: 3.0rem;font-weight: bold;color: #EC5D31;"
                              >
                                ￥{{ item.SalePrice }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <span
                    class="warning_tip"
                    v-if="portfolioBenefits.length > 1 ? false : true"
                    >您当前选择的权益与组合规则不符，请按照组合规则选择，鼠标悬浮在<i
                      class="el-icon-warning-outline"
                      style="color:black;"
                    ></i
                    >上查看组合规则。</span
                  >
                </div>
              </div>
              <div class="list_box">
                <div class="left">自有权益:</div>
                <div class="right">
                  <div class="add_content" @click="addOwnRight()">
                    <i class="el-icon-plus"></i>
                    <span>点击添加权益</span>
                  </div>
                </div>
              </div>
              <div class="list_box" v-if="purchasedList.length">
                <div class="left">已选自有权益:</div>
                <div class="right">
                  <!-- <div class="list" style="display: flex;justify-content: space-between;"
                                        v-for="item in ownList" :key="item.ID">
                                        <div class="name" style="width: 45%;">{{ item.Name }}</div>
                                        <div class="name" style="width: 25%;">{{ item.EquityFlagListName }}</div>
                                        <div class="name" style="width: 10%;">x{{ item.MinimumQuantity }}</div>
                                        <div class="name" style="width: 10%;color: #F78C53;">￥{{ item.SalePrice }}</div>
                                    </div> -->
                  <div
                    style="display:flex;width: 100%;"
                    v-for="item in purchasedListShow"
                    :key="item.id"
                  >
                    <div class="list1">
                      <div class="item1">
                        <i
                          @click="removePayList(item.ID)"
                          class="el-icon-remove"
                          style="color:#ED5757;font-size: 3rem;"
                        ></i>
                      </div>
                    </div>
                    <div
                      style="padding:1.3rem;background: #FFFFFF;box-shadow: 2px 1px 9px 0px rgba(180,171,206,0.25);border-radius: 18px 18px 18px 18px;width: 100%;margin-bottom: 1.3rem;"
                    >
                      <div class="list">
                        <div class="item">
                          <div
                            style="width: 30%;height: 100%;margin-right: 2%;"
                          >
                            <img
                              style="width: 100%;height: 100%;border-radius: 8px;"
                              :src="JSON.parse(item.MainPicturePath)[0].url"
                              :alt="JSON.parse(item.MainPicturePath)[0].name"
                            />
                          </div>
                          <div
                            style="display: flex;flex-direction: column;justify-content: space-between;width:68%;"
                          >
                            <div>
                              <p
                                style="font-size:2rem;color:#1E1B19;line-height:3rem;font-weight: 600;"
                              >
                                {{ item.Name }}
                              </p>
                              <div>
                                <span
                                  v-for="item1 in item.EquityFlagListName"
                                  style="padding:4px;border-radius: 2px 2px 2px 2px;border:1px solid #426CE9;display:inline-block;
                                                        font-size:1rem;line-height:1rem;color:#426CE9;margin-right: 0.4rem;"
                                  >{{ item1 }}</span
                                >
                              </div>
                            </div>
                            <div
                              style="display: flex;justify-content: space-between;"
                            >
                              <div>
                                <span
                                  style="font-size:1.2rem;color:#827070;margin-right:2.7rem;"
                                  >库存：{{ item.InventoryQuantity }}份</span
                                >
                                <span
                                  style="font-size:1.2rem;color:#827070;margin-right:2.7rem;"
                                  >已售：{{ item.SoldQuantity }}份</span
                                >
                              </div>
                              <div
                                style="margin-right:1.2rem;font-size: 3.0rem;font-weight: bold;color: #EC5D31;"
                              >
                                ￥{{ item.SalePrice }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <span
                    class="warning_tip"
                    v-if="portfolioBenefits.length > 1 ? false : true"
                    >您当前选择的权益与组合规则不符，请按照组合规则选择，鼠标悬浮在<i
                      class="el-icon-warning-outline"
                      style="color:black;"
                    ></i
                    >上查看组合规则。</span
                  >
                </div>
              </div>
              <div class="list_box">
                <div class="left">已购买权益:</div>
                <div class="right">
                  <div class="add_content" @click="addPayRight()">
                    <i class="el-icon-plus"></i>
                    <span>点击添加权益</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 基础信息 -->
            <div class="block_box">
              <div class="title">基础信息</div>
              <div class="list_box">
                <div class="left">权益标题:</div>
                <div
                  class="right"
                  :class="inputValue.title ? '' : 'right_boder'"
                >
                  <el-input
                    v-model="inputValue.title"
                    placeholder="请输入权益标题"
                  ></el-input>
                </div>
              </div>
              <div
                class="list_box"
                v-if="lableList.length"
                style="margin-bottom: 0;"
              >
                <div class="left">已选权益标签：</div>
                <div class="right">
                  <div class="exhibition">
                    <!-- <div class="exhibition_title">所选内容:</div> -->
                    <div class="exhibition_content">
                      <div
                        class="exhibition_content_list"
                        v-for="item in lableList"
                        :key="item"
                      >
                        <div class="content_list_name">{{ item }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">权益标签:</div>
                <div class="right">
                  <div class="add_content" @click="ShowLabelDialog()">
                    <i class="el-icon-plus"></i>
                    <span>点击添加标签</span>
                  </div>
                </div>
              </div>
              <div
                class="list_box"
                v-if="compnyList.length"
                style="margin-bottom: 0;"
              >
                <div class="left">已选采购公司权限：</div>
                <div class="right">
                  <div class="exhibition">
                    <!-- <div class="exhibition_title">所选内容:</div> -->
                    <div class="exhibition_content">
                      <div
                        class="exhibition_content_list"
                        v-for="item in compnyList"
                        :key="item"
                      >
                        <div class="content_list_name">{{ item }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">采购公司权限设置:</div>
                <div class="right">
                  <div class="add_content" @click="ShowCompngDialog()">
                    <i class="el-icon-plus"></i>
                    <span>点击添加权限</span>
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">使用期限:</div>
                <div class="right">
                  {{ this.EffectiveTime ? this.EffectiveTime : "---" }} 至
                  {{ this.ExpireTime ? this.ExpireTime : "---" }}
                </div>
              </div>
              <div class="list_box" v-if="portfolioBenefits.length">
                <div class="left">包含权益期限:</div>
                <div class="right">
                  <div v-for="item in portfolioBenefits" :key="item.ID">
                    <div style="font-size: 1.8rem;font-weight: 700;">
                      {{ item.Name }}
                    </div>
                    <div style="margin-top: -1rem;">
                      {{ item.EffectiveTime.split(" ")[0] }} 至
                      {{ item.ExpireTime.split(" ")[0] }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">库存数量(份):</div>
                <div
                  class="right"
                  :class="inputValue.inventory ? '' : 'right_boder'"
                >
                  <el-input
                    @input="inputInventoryQuantity"
                    v-model="inputValue.inventory"
                    placeholder="请输入库存数量"
                  ></el-input>
                  <span
                    class="warning_tip"
                    v-if="
                      inputValue.inventory > maxInventoryQuantity ? true : false
                    "
                    >库存数量不允许大于{{
                      maxInventoryQuantityName + "的" + maxInventoryQuantity
                    }}个</span
                  >
                </div>
              </div>
              <div class="list_box" v-if="portfolioBenefits.length">
                <div class="left"></div>
                <div class="right">
                  <div style="font-size: 1.8rem;font-weight: 700;">
                    所选权益库存数量：
                  </div>
                  <div v-for="item in portfolioBenefits" :key="item.ID">
                    {{ item.Name }}：{{ item.InventoryQuantity }} 份
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">起购数量(份):</div>
                <div
                  class="right"
                  :class="inputValue.MPnum ? '' : 'right_boder'"
                >
                  <el-input
                    @input="inputMPnum"
                    v-model.number="inputValue.MPnum"
                    placeholder="请输入起购数量"
                  ></el-input>
                  <div
                    class="warning_tip"
                    v-if="
                      (minMPnum > inputValue.MPnum ? true : false) &&
                        portfolioBenefits.length > 1
                    "
                  >
                    起购数量不允许小于{{ minMPnumName + "的" + minMPnum }}个
                  </div>
                  <div
                    class="warning_tip"
                    v-if="
                      maxInventoryQuantity < inputValue.MPnum ? true : false
                    "
                  >
                    起购数量不允许大于{{
                      maxInventoryQuantityName + "的" + maxInventoryQuantity
                    }}个
                  </div>
                  <div
                    class="warning_tip"
                    v-if="
                      inputValue.inventory < inputValue.MPnum &&
                      inputValue.MPnum <= maxInventoryQuantity
                        ? true
                        : false
                    "
                  >
                    起购数量不允许大于设置的库存数量！
                  </div>
                </div>
              </div>
              <div class="list_box" v-if="portfolioBenefits.length">
                <div class="left"></div>
                <div class="right">
                  <div style="font-size: 1.8rem;font-weight: 700;">
                    所选权益起购数量：
                  </div>
                  <div v-for="item in portfolioBenefits" :key="item.ID">
                    {{ item.Name }}：{{ item.MinimumQuantity }} 份
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">市场价格(元):</div>
                <div class="right">
                  {{ inputValue.SalePrice ? inputValue.SalePrice : "--" }}元
                </div>
              </div>
              <div class="list_box">
                <div class="left">平台价格(元):</div>
                <div class="right">
                  {{
                    inputValue.platformPrice ? inputValue.platformPrice : "--"
                  }}元
                </div>
              </div>
              <div class="list_box">
                <div class="left">服务费:</div>
                <div class="right right_table">
                  <div
                    style="display: flex;justify-content: space-between;font-size: 1.8rem;"
                  >
                    <div style="width: 50%;">权益名称</div>
                    <div style="width: 25%;text-align: center;">
                      权益平台服务费
                    </div>
                    <div style="width: 25%;text-align: center;">
                      小程序服务费
                    </div>
                  </div>
                  <div
                    v-for="item in portfolioBenefits"
                    :key="item.ID"
                    style="display: flex;justify-content: space-between;font-size: 1.8rem;"
                  >
                    <div style="width: 50%;">{{ item.Name }}</div>
                    <div style="width: 20%;text-align: center;">
                      {{ item.PlatformServiceRate*100 }}%
                    </div>
                    <div style="width: 20%;text-align: center;">
                      {{ item.EquityServiceRate *100}}%
                    </div>
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">让利积分(分):</div>
                <div class="right">
                  <div>
                    {{ inputValue.Integral ? inputValue.Integral : "--" }} 分
                  </div>
                  <div v-for="item in portfolioBenefits" :key="item.ID">
                    {{ item.Name }}：{{ item.Integral }} 分
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">平台结算价格</div>
                <div class="right">
                  <div>
                    {{ platformSettlement ? platformSettlement : "--" }}元
                  </div>
                  <div v-for="item in portfolioBenefits" :key="item.ID">
                    {{ item.Name }}：{{
                      item.CostPrice -
                        item.CostPrice * (item.PlatformServiceRate / 100)
                    }}
                    元
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">小程序结算价格</div>
                <div class="right">
                  <div>{{ APPSettlement ? APPSettlement : "--" }}元</div>
                  <div v-for="item in portfolioBenefits" :key="item.ID">
                    {{ item.Name }}：{{
                      item.CostPrice -
                        item.CostPrice * (item.EquityServiceRate / 100)
                    }}
                    元
                  </div>
                </div>
              </div>
              <div class="list_box" style="align-items: center;">
                <div class="left" style="padding-right: .5rem;">
                  是否允许在其他国企民企平台进行售卖
                </div>
                <div class="right">
                  <el-radio v-model="channel" label="1">是</el-radio>
                  <el-radio v-model="channel" label="0">否</el-radio>
                </div>
              </div>
              <div class="list_box">
                <div class="left">使用人数:</div>
                <div class="right right_table">
                  <div
                    style="display: flex;justify-content: space-between;font-size: 1.8rem;"
                  >
                    <div style="width: 70%;">权益名称</div>
                    <div style="width: 30%;text-align: center;">使用人数</div>
                  </div>
                  <div
                    v-for="item in portfolioBenefits"
                    :key="item.ID"
                    style="display: flex;justify-content: space-between;font-size: 1.8rem;"
                  >
                    <div style="width: 70%;">{{ item.Name }}</div>

                    <div style="width: 30%;text-align: center;">
                      {{ item.UsersCount }}人
                    </div>
                  </div>
                </div>
              </div>
              <div class="list_box">
                <div class="left">是否允许退款</div>
                <div class="right">
                  <el-radio v-model="radio" label="1">是</el-radio>
                  <el-radio v-model="radio" label="0">否</el-radio>
                  <el-radio v-model="radio" label="2">允许部分退款</el-radio>
                </div>
              </div>
              <div class="list_box" v-show="radio == 2">
                <div class="left">可退款权益</div>
                <div class="right">
                  <div class="add_content" @click="addRefund">
                    <i class="el-icon-plus"></i>
                    <span>点击添加权益</span>
                  </div>
                </div>
              </div>
              <!-- 主图 -->
              <div class="list_box">
                <div class="left">权益主图：</div>
                <div class="right">
                  主图仅可上传1张图片，图片不超过512KB，仅支持jpg、png格式，建议比例1：1
                </div>
              </div>
              <div class="list_box">
                <div class="left"></div>
                <div class="right">
                  <update
                    ref="update"
                    :num="1"
                    :octopus="octopus"
                    @imgList="getMasterList"
                  ></update>
                </div>
              </div>
              <!-- 附图 -->
              <div class="list_box">
                <div class="left">权益附图：</div>
                <div class="right">
                  附图可上传7张图片，单张图片不超过512KB，仅支持jpg、png格式，建议比例1：1
                </div>
              </div>
              <div class="list_box">
                <div class="left"></div>
                <div class="right">
                  <update
                    ref="updateFigures"
                    @imgList="getFiguresList"
                    :num="7"
                    :octopus="octopus"
                    :multiple="true"
                  >
                  </update>
                </div>
              </div>
            </div>
            <!-- 权益内容 -->
            <div class="block_box">
              <div class="title">权益内容</div>
              <div class="list_box" style="display: block;">
                <div class="left">权益详情:</div>
                <div class="right" style="width: 100%;line-height: 1rem;">
                  <quill
                    ref="quill"
                    :octopus="octopus"
                    refName="quill3"
                    refInput="quill3i"
                    @quillContent="getQuillContent"
                  ></quill>
                </div>
              </div>
              <div class="list_box" style="display: block;">
                <div class="left">使用规则:</div>
                <div class="right" style="width: 100%;line-height: 1rem;">
                  <quill
                    ref="quillRules"
                    :octopus="octopus"
                    refName="quill4"
                    refInput="quill4i"
                    @quillContent="getQuillRulesContent"
                  ></quill>
                </div>
              </div>
            </div>
            <div class="button_list">
              <button style="background-color: #1E1B19;">存入草稿</button>
              <button @click="addList()">发布</button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <LabelDialog ref="LabelDialog" @lableList="getLableList"></LabelDialog>
    <CompnyDialog ref="CompnyDialog" @compnyList="getCompnyList"></CompnyDialog>
    <OwnRight
      :ownList="ownList"
      ref="OwnRights"
      @ownRightList="getCheckRight"
    ></OwnRight>
    <PayRight ref="PayRight" @payRightList="getPayRight"></PayRight>
    <Refund
      ref="Refund"
      @addRefundList="addRefundList"
      :portfolioBenefits="portfolioBenefits"
    ></Refund>
  </div>
</template>
<script>
import update from "@/components/Components/imgUpdate.vue";
import quill from "@/components/Components/quillEditor.vue";
import LabelDialog from "./labelDialog.vue";
import CompnyDialog from "./compnyDialog.vue";
import OwnRight from "./addOwnRights.vue";
import PayRight from "./addPayRight.vue";
import Refund from "./addRefund.vue";
export default {
  name: "screen_event_Rights",
  components: {
    OwnRight,
    update,
    quill,
    LabelDialog,
    CompnyDialog,
    PayRight,
    Refund
  },
  props: {},
  computed: {
    portfolioBenefits() {
      this.ownListShow = JSON.parse(JSON.stringify(this.ownList));
      this.ownList.forEach((item, index) => {
        if (!Array.isArray(item.EquityFlagListName)) {
          this.ownListShow[
            index
          ].EquityFlagListName = item.EquityFlagListName.split(",");
        }
      });
      this.$set(this.ownListShow);

      this.purchasedListShow = JSON.parse(JSON.stringify(this.purchasedList));
      this.purchasedList.forEach((item, index) => {
        if (!Array.isArray(item.EquityFlagListName)) {
          this.purchasedListShow[
            index
          ].EquityFlagListName = item.EquityFlagListName.split(",");
        }
      });

      this.$set(this.purchasedListShow);

      this.$nextTick(() => {
        if (this.portfolioBenefits.length > 1) {
          //生效时间
          let EffectiveTime = new Date(
            Math.min(
              ...this.portfolioBenefits.map(
                item => new Date(item.EffectiveTime)
              )
            )
          );
          let ExpireTime = new Date(
            Math.max(
              ...this.portfolioBenefits.map(item => new Date(item.ExpireTime))
            )
          );
          this.EffectiveTime = new Date(
            EffectiveTime.setDate(EffectiveTime.getDate() + 1)
          )
            .toISOString()
            .slice(0, 10);
          this.ExpireTime = new Date(
            ExpireTime.setDate(ExpireTime.getDate() + 1)
          )
            .toISOString()
            .slice(0, 10);

          let maxInventoryQuantityNum = this.portfolioBenefits[0]
            .InventoryQuantity;
          let maxInventoryQuantityName = this.portfolioBenefits[0].Name;
          //遍历获得最小的库存
          this.portfolioBenefits.forEach(item => {
            if (item.InventoryQuantity < maxInventoryQuantityNum) {
              maxInventoryQuantityNum = item.InventoryQuantity;
              maxInventoryQuantityName = item.Name;
            }
          });

          let minMPnumNum = this.portfolioBenefits[0].MinimumQuantity;
          let minMPnumName = this.portfolioBenefits[0].Name;
          //便利获得最大的起购数量
          this.portfolioBenefits.forEach(item => {
            if (item.MinimumQuantity > minMPnumNum) {
              minMPnumNum = item.MinimumQuantity;
              minMPnumName = item.Name;
            }
          });

          if (maxInventoryQuantityNum <= minMPnumNum) {
            this.$message({
              type: "error",
              message: "您选择的权益最小起购数量和最大库存有冲突！"
            });
            this.ownList.splice(0, this.ownList.length);
            this.purchasedList.splice(0, this.purchasedList.length);
            this.rightList.splice(0, this.rightList.length);
            this.inputValue.SalePrice = "";
            this.inputValue.platformPrice = "";
            this.EffectiveTime = "";
            this.ExpireTime = "";
            this.inputValue.Integral = "";
            this.platformSettlement = "";
            this.APPSettlement = "";
        
          } else {
            this.inputValue.inventory = maxInventoryQuantityNum;
            this.maxInventoryQuantity = maxInventoryQuantityNum;
            this.maxInventoryQuantityName = maxInventoryQuantityName;
            this.inputValue.MPnum = minMPnumNum;
            this.minMPnum = minMPnumNum;
            this.minMPnumName = minMPnumName;
          }
        } else {
          this.inputValue.inventory = "";
          this.inputValue.MPnum = "";
          this.inputValue.SalePrice = "";
          this.inputValue.platformPrice = "";
          this.EffectiveTime = "";
          this.ExpireTime = "";
          this.inputValue.Integral = "";
          this.platformSettlement = "";
          this.APPSettlement = "";
        }
      });
      return [...this.ownList, ...this.purchasedList];
    }
  },
  data() {
    return {
      EquityFlagListName: [],
      octopus: this.$parent.octopus,
      drawer: false,
      // 产品类型
      typeSelect: {
        options: [],
        value: ""
      },
      // 合同编号
      contractSelect: {
        options: [],
        value: ""
      },
      // 公司名称
      compnySelect: {
        options: [],
        value: ""
      },
      // 产品名称
      productsSelect: {
        options: [],
        value: ""
      },
      radio: "1", //是否退款
      channel: "1", //是否允许在其他国企民企平台进行售卖
      refundType: "1", //退款规则
      refundTypeArr: [
        {
          id: 1,
          skyNumber: "",
          proportion: ""
        }
      ],
      inputValue: {
        title: "", //权益标题
        inventory: "", //库存数量
        MPnum: "", //起购数量
        platformPrice: "", //平台价格
        SalePrice: "", //市场价格
        platformServiceCharge: "", //权益平台服务费
        APPServiceCharge: "", //小程序服务费
        Integral: "", //让利积分
        location: "", //权益地址
        usersCount: 1 //使用人数
      },
      lableList: [],
      lableListID: [],
      compnyList: [],
      compnyListID: [],
      dataList: [],
      timeList: [],
      dataInd: 0,
      title: "添加权益",
      masterImg: [], //主图
      figuresList: [], //附图
      deltedContent: "", //权益详情
      rulesContent: "", //使用规则
      ownList: [], //选择的自有权益
      purchasedList: [], //选择的已购权益
      rightList: [],
      ownPurchasedListID: [], //选择的已购权益
      ExpireTime: "", //过期时间
      EffectiveTime: "", //生效时间
      platformSettlement: 0, //平台结算价格
      APPSettlement: 0, //小程序结算价格,
      maxInventoryQuantity: 0, //组合权益最大库存数量
      maxInventoryQuantityName: "",
      minMPnum: null, //最小起购数量
      minMPnumName: "",
      addOwnRightFlag: 0, //首次渲染自有权益
      addPayRightFlag: 0, //首次渲染已购权益
      ownListShow: [], //展示处理后的自有权益
      purchasedListShow: [] //展示处理后的已购权益
    };
  },
  mounted() {

  },
  created() {},
  methods: {
    // 移除已选择的自有权益
    removeOwnList(ID) {
      let deleteIndex = this.ownList.findIndex(item => {
        return item.ID == ID;
      });
      this.ownList.splice(deleteIndex, 1);
      this.$refs.OwnRights.changeTableStatus(ID);
    },
    // 移除已选择的已购权益
    removePayList(ID) {
      let deleteIndex = this.purchasedList.findIndex(item => {
        return item.ID == ID;
      });
      this.purchasedList.splice(deleteIndex, 1);
      this.$refs.PayRight.changeTableStatus(ID);
    },
    //允许部分退款展开页面
    addRefund() {
      this.$nextTick(() => {
        this.$refs.Refund.drawer = true;
      });
    },
    addRefundList(e) {
    },
    //起购数量判断处理
    inputMPnum(e) {
      this.inputValue.MPnum = Number(e.replace(/[^\d]/g, ""));
      let minMPnumNum = this.portfolioBenefits[0].MinimumQuantity;
      let minMPnumName = this.portfolioBenefits[0].Name;
      //便利获得最大的起购数量
      this.portfolioBenefits.forEach(item => {
        if (item.MinimumQuantity > minMPnumNum) {
          minMPnumNum = item.MinimumQuantity;
          minMPnumName = item.Name;
        }
      });
      this.minMPnum = minMPnumNum;
      this.minMPnumName = minMPnumName;
    },
    //库存数量判断处理
    inputInventoryQuantity(e) {
      this.inputValue.inventory = Number(e.replace(/[^\d]/g, ""));
      let maxInventoryQuantityNum = this.portfolioBenefits[0].InventoryQuantity;
      let maxInventoryQuantityName = this.portfolioBenefits[0].Name;
      //遍历获得最小的库存
      this.portfolioBenefits.forEach(item => {
        if (item.InventoryQuantity < maxInventoryQuantityNum) {
          maxInventoryQuantityNum = item.InventoryQuantity;
          maxInventoryQuantityName = item.Name;
        }
      });
      this.maxInventoryQuantity = maxInventoryQuantityNum;
      this.maxInventoryQuantityName = maxInventoryQuantityName;
    },
    // 新增权益
    addList() {
      if (this.portfolioBenefits.length < 2) {
        // this.$message({ message: '组合权益选择不符合要求！', type: 'error' })
        // return;
      } else if (this.inputValue.title.trim() == "") {
        //输入内容提示信息
        this.$message({ message: "请输入权益标题！", type: "warning" });
        return;
      } else if (this.lableList.length == 0) {
        this.$message({ message: "请添加权益标签！", type: "warning" });
        return;
      } else if (this.inputValue.inventory > this.maxInventoryQuantity) {
        this.$message({
          message: `库存数量必须小于${this.maxInventoryQuantityName}-${
            this.maxInventoryQuantityNum
          }的库存数量！`,
          type: "warning"
        });
        return;
      } else if (this.inputValue.MPnum <= this.minMPnum) {
        this.$message({
          message: `起购数量必须大于${this.minMPnumName}-${
            this.minMPnum
          }的起购数量！`,
          type: "warning"
        });
        return;
      } else if (this.$refs["update"].imgList.length == 0) {
        this.$message({ message: "请上传权益主图！", type: "warning" });
        return;
      } else if (this.$refs["updateFigures"].imgList.length == 0) {
        this.$message({ message: "请上传至少一张权益附图！", type: "warning" });
        return;
      } else if (this.$refs["quill"].content.trim() == "") {
        this.$message({ message: "请输入权益详情！", type: "warning" });
        return;
      } else if (this.$refs["quillRules"].content.trim() == "") {
        this.$message({ message: "请输入使用规则！", type: "warning" });
        return;
      } else {
        let o = this;
        let EquityList = [];
        let purchasedEquityList = [];
        this.portfolioBenefits.forEach(item => {
          EquityList.push(item.ID);
          purchasedEquityList.push();
        });
        this.octopus.request.api.post(
          "/Octopus/Engine/Item",
          {
            id: 748,
            type: "CREATE",
            cellData: [
              {
                name: "CompanyID",
                defaultValue: o.octopus.passport.authorization.company
              }, // 公司ID
              { name: "CostPrice", defaultValue: o.inputValue.SalePrice }, // 市场价格
              {
                name: "CreateTime",
                defaultValue:
                  new Date().toJSON().substring(0, 10) +
                  " " +
                  new Date().toTimeString().substring(0, 8)
              }, // 创建时间
              { name: "CreateUserID", defaultValue: o.octopus.passport.id }, // 创建人
              { name: "Description", defaultValue: o.deltedContent }, // 权益内容
              { name: "EffectiveTime", defaultValue: o.EffectiveTime }, // 生效日期
              { name: "EquityList", defaultValue: EquityList }, // 外部权益包列表  字符串(逗号分开)
              { name: "ExpireTime", defaultValue: o.ExpireTime }, // 过期时间
              { name: "FlagList", defaultValue: o.lableListID }, // 权益标签
              { name: "ID" }, // ID
              { name: "Integral", defaultValue: o.inputValue.Integral }, // 让利积分
              { name: "IsOpenSale", defaultValue: o.channel }, // 是否允许在其他国企平台售卖(1.允许,0.不允许)
              { name: "IsRefund", defaultValue: o.radio }, // 是否允许退款
              { name: "MainPicturePath", defaultValue: o.masterImg }, // 主图
              { name: "MinimumQuantity", defaultValue: o.inputValue.MPnum }, // 起售数量
              { name: "Name", defaultValue: o.inputValue.title }, // 权益名称（标题）
              // { name: "ProductID", defaultValue: this.productsSelect.value },	// ProductID
              { name: "SalePrice", defaultValue: o.inputValue.platformPrice }, // 发售价（平台价格）
              { name: "SecondaryPicturePath", defaultValue: o.figuresList }, // 副图
              {
                name: "Status",
                defaultValue:
                  o.octopus.passport.authorization.company == 1 ? 5 : 2
              }, // 权益状态（保存未提交（草稿箱）、已提交/待审核、审核通过、审核未通过、未启用，启用、已售完、到期）
              { name: "TransferRuleID", defaultValue: o.compnyListID.join() }, // 采购公司限制
              // { name: "TypeID" , defaultValue: this.typeSelect.value},	// 权益类型(单个类型、多个类型)
              { name: "TypeID", defaultValue: 2 }, // 权益类型(单个类型、多个类型)
              {
                name: "UpdateTime",
                defaultValue:
                  new Date().toJSON().substring(0, 10) +
                  " " +
                  new Date().toTimeString().substring(0, 8)
              }, // 修改时间
              { name: "UseRuleDescription", defaultValue: o.rulesContent } // 权益使用规则
            ]
          },
          function(data) {
            if (data.status.code == 200) {
              // 添加退款规则数据
              // o.refundTypeArr.map(item=> o.createRefundRules(data, item))
              if (o.octopus.passport.authorization.company == 1) {
                o.octopus.tools.openAPI(
                  "/ESB/AIGC/CreateEquityRecord",
                  {
                    companyID: o.octopus.passport.project, // 权益所属公司ID
                    equityID: data.content.value, // 权益ID
                    quantity: o.inputValue.inventory, // 组合权益数量
                    createUserID: o.octopus.passport.id, // 创建人
                    channelID: 1 //直接通过
                  },
                  function(datas) {
                    if (datas.content.status == 200) {
                      o.octopus.request.api.post("/Octopus/Engine/Item", {
                        id: 1196,
                        type: "CREATE",
                        cellData: [
                          {
                            name: "CreateTime",
                            defaultValue:
                              new Date().toJSON().substring(0, 10) +
                              " " +
                              new Date().toTimeString().substring(0, 8)
                          }, // 时间
                          {
                            name: "CreateUserID",
                            defaultValue: o.octopus.passport.id
                          }, // 创建人
                          {
                            name: "EquityID",
                            defaultValue: data.content.value
                          }, // 权益ID
                          { name: "ID" }, // ID
                          { name: "Opinions", defaultValue: "新建组合权益" }, // 审核内容
                          { name: "Status", defaultValue: 1 } // 审核状态
                        ]
                      });
                      o.$message({
                        message: "创建成功",
                        type: "success"
                      });
                      o.$emit("createdSuccess", 0);
                    } else {
                      o.octopus.tips.error(datas);
                    }
                  }
                );
              } else {
                o.octopus.request.api.post(
                  "/Octopus/Engine/Item",
                  {
                    id: 1186,
                    type: "CREATE",
                    cellData: [
                      {
                        name: "CompanyID",
                        defaultValue: o.octopus.passport.authorization.company
                      }, // 公司ID
                      {
                        name: "CreateTime",
                        defaultValue:
                          new Date().toJSON().substring(0, 10) +
                          " " +
                          new Date().toTimeString().substring(0, 8)
                      }, // 创建时间
                      {
                        name: "CreateUserID",
                        defaultValue: o.octopus.passport.id
                      }, // 创建人
                      {
                        name: "EquityCount",
                        defaultValue: o.inputValue.inventory
                      }, // 库存数量
                      { name: "EquityID", defaultValue: data.content.value }, // 权益ID
                      { name: "ID" }, // ID
                      {
                        name: "UpdateTime",
                        defaultValue:
                          new Date().toJSON().substring(0, 10) +
                          " " +
                          new Date().toTimeString().substring(0, 8)
                      }, // 修改时间
                      { name: "TypeID", defaultValue: 2 } // TypeID
                    ]
                  },
                  function(datas) {
                    if (datas.status.code == 200) {
                      o.octopus.request.api.post("/Octopus/Engine/Item", {
                        id: 1196,
                        type: "CREATE",
                        cellData: [
                          {
                            name: "CreateTime",
                            defaultValue:
                              new Date().toJSON().substring(0, 10) +
                              " " +
                              new Date().toTimeString().substring(0, 8)
                          }, // 时间
                          {
                            name: "CreateUserID",
                            defaultValue: o.octopus.passport.id
                          }, // 创建人
                          {
                            name: "EquityID",
                            defaultValue: data.content.value
                          }, // 权益ID
                          { name: "ID" }, // ID
                          { name: "Opinions", defaultValue: "新建组合权益" }, // 审核内容
                          { name: "Status", defaultValue: 1 } // 审核状态
                        ]
                      });
                      o.$message({
                        message: "创建成功",
                        type: "success"
                      });
                      o.$emit("createdSuccess", 0);
                    } else {
                      o.octopus.tips.error(datas);
                    }
                  }
                );
              }
            } else {
              o.octopus.tips.error(data);
            }
          }
        );

        this.drawer = false;
      }
    },
    // 点击添加规则
    addRule() {
      const newId = this.refundTypeArr.length + 1;
      // 创建一个与数组中第一个对象相同结构的新对象
      const newRefundType = {
        id: newId,
        skyNumber: "",
        proportion: ""
      };
      // 将新对象添加到数组中
      this.refundTypeArr.push(newRefundType);
    },
    deleteRefund(index) {
      this.refundTypeArr.splice(index, 1);
    },
    drawerOp() {
      this.drawer = true;
    },
    ShowLabelDialog() {
      this.$refs.LabelDialog.drawerOp();
    },
    ShowCompngDialog() {
      this.$refs.CompnyDialog.drawerOp();
    },
    getLableList(list, listID) {
      this.lableList = list;
      this.lableListID = listID;
    },
    getCompnyList(list, typeArr, scaleArr, fundArr, industryArr) {
      this.compnyListID = [...typeArr, ...scaleArr, ...fundArr, ...industryArr];
      this.compnyList = list;
    },
    // 添加使用权限
    addData() {
      this.dataInd++;
      this.dataList.push(this.dataInd);
    },
    // 添加自有权益
    addOwnRight() {
      this.$nextTick(() => {
        if (this.addOwnRightFlag == 0) {
          this.$refs.OwnRights.drawerOp();
          // this.$refs.OwnRights.multipleSelection = [];
          this.addOwnRightFlag = 1;
        }
        this.$refs.OwnRights.drawer = true;
      });
    },
    // 添加已购权益
    addPayRight() {
      this.$nextTick(() => {
        if (this.addPayRightFlag == 0) {
          this.$refs.PayRight.drawerOp();
          this.addPayRightFlag = 1;
        }
        this.$refs.PayRight.drawer = true;
      });
    },
    // 获取选择的自有权益列表
    getCheckRight(list) {
      this.ownList = list;
      this.getRightMassage();
    },
    // 获取选择的已购权益列表
    getPayRight(list) {
      this.purchasedList = list;
      this.getRightMassage();
    },
    getRightMassage() {
      this.ownPurchasedListID = [];
      // 市场价格
      let SalePrice = 0;
      // 平台价格
      let CostPrice = 0;
      // 让利积分
      let Integral = 0;
      // 平台结算价格
      let platformSettlement = 0;
      // 小程序结算价格
      let APPSettlement = 0;
      this.portfolioBenefits = [...this.ownList, ...this.purchasedList]; //整合自有+已购
      this.rightList = this.portfolioBenefits;
      this.portfolioBenefits.forEach(res => {
        this.ownPurchasedListID.push(res.ID);
        SalePrice += res.SalePrice;
        CostPrice += res.CostPrice;
        Integral += res.Integral;
      });
      this.ownList.forEach(res => {
        // 计算平台结算价格
        platformSettlement +=
          res.CostPrice - (res.CostPrice * res.PlatformServiceRate) ;
        // 计算小程序结算价格
        APPSettlement +=
          res.CostPrice - (res.CostPrice * res.EquityServiceRate) ;
      });
      this.purchasedList.forEach(res => {
        // 计算平台结算价格
        platformSettlement += res.CostPrice;
        APPSettlement += res.CostPrice;
      });
      this.platformSettlement = platformSettlement;
      this.APPSettlement = APPSettlement - Integral / 10;
      this.inputValue.platformPrice = CostPrice;
      this.inputValue.SalePrice = SalePrice;
      this.inputValue.Integral = Integral;
      // 生效时间 过期时间
    },
    // 获取图片信息
    getMasterList(list) {
      this.masterImg = JSON.stringify(list);
    },
    getFiguresList(list) {
      this.figuresList = JSON.stringify(list);
    },
    // 权益详情
    getQuillContent(list) {
      this.deltedContent = list;
    },
    // 使用规则
    getQuillRulesContent(list) {
      this.rulesContent = list;
    },

    // 添加退款规则
    createRefundRules(data, refund) {
      if (this.refundType == 1) {
        refund = {
          ...refund,
          skyNumber: 0,
          proportion: 0,
          Name: "无条件退款"
        };
      } else {
        refund.skyNumber = Math.ceil(refund.skyNumber * 24);
        refund.Name =
          "申请退款日距权益使用截止日期前" +
          refund.skyNumber +
          "小时，支持退款" +
          refund.proportion +
          "%";
      }
      let o = this;
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1210,
          type: "CREATE",
          cellData: [
            {
              name: "CompanyID",
              defaultValue:
                o.octopus.passport.authorization.company == 1
                  ? o.compnySelect.value
                  : o.compnySelect.options[0].ID
            }, // 公司
            {
              name: "CreateTime",
              defaultValue:
                new Date().toJSON().substring(0, 10) +
                " " +
                new Date().toTimeString().substring(0, 8)
            }, // 创建时间
            { name: "CreateUserID", defaultValue: o.octopus.passport.id }, // 创建人
            { name: "EquityID", defaultValue: data.content.value }, // 权益
            { name: "ID" }, // ID
            { name: "InventoryID" }, // 库存
            { name: "Name", defaultValue: refund.Name }, // 规则名称
            { name: "ProductID", defaultValue: this.productsSelect.value }, // 产品ID
            {
              name: "ServiceCharge",
              defaultValue: refund.proportion==0 ? 0:(100 - refund.proportion) / 100
            }, // 服务费
            { name: "Status", defaultValue: 1 }, // 状态
            { name: "TimeLimit", defaultValue: refund.skyNumber }, // 时间限制
            { name: "TypeID", defaultValue: 2 }, // 类型ID
            { name: "UpdateTime" } // 修改时间
          ]
        },
        function(data) {
          if (data.status.code == 200) {
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    }
  }
};
</script>
<style scoped>
.list {
  position: relative;
  width: 100%;
  padding-top: 30%;
  margin-bottom: 1rem;
}

.list1 {
  position: relative;
  width: 10%;
  padding-top: 30%;
  margin-bottom: 1rem;
}

.item {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.item1 {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.small {
  width: 30% !important;
}

.el-icon-delete {
  font-size: 2rem;
  margin-left: 2rem;
  color: #959191;
  cursor: pointer;
}

.el-icon-delete:hover {
  color: #f78c53;
}

.button_list {
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  position: absolute;
  background-color: #ffff;
  bottom: 1rem;
  width: calc(100% - 7rem);
}

.button_list button {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #f78c53;
  cursor: pointer;
}

.drawer_box {
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer_t {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  padding: 2rem;
  top: 0;
  left: 0;
  background-color: #ffff;
  /* border-bottom: 1px solid #0000; */
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
  vertical-align: middle;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  position: absolute;
  right: 6rem;
}

.created_content {
  height: calc(100vh - 14rem);
  /* height: 100vh; */
  margin-top: 5rem;
  font-size: 1.5rem;
  padding: 0 0.5rem;
  overflow: auto;
  box-sizing: border-box;
}

.created_content .created_content_list .title {
  font-weight: 700;
  font-size: 1.7rem;
}

.warning_tip {
  color: rgba(255, 0, 0, 0.996);
  font-size: 1.5rem;
  font-weight: 400;
}

.created_content .created_content_list .block_box {
  box-shadow: inset 0px 0px 4px 0px #e9e9e9;
  background: #fdfdfd;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
}

.created_content .created_content_list .list_box {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.created_content .created_content_list .list_box {
  /* height: 3.5rem; */
  line-height: 4rem;
  margin-top: 2rem;
}

.created_content .created_content_list .list_box .left {
  width: 20%;
  font-size: 1.5rem;
}

.created_content .created_content_list .list_box .right {
  width: 80%;
}

.created_content .created_content_list .list_box .right .delte {
  font-size: 1.6rem;
  color: #898582;
  margin-left: 2rem;
  cursor: pointer;
}

.created_content .created_content_list .list_box .right .delte:hover {
  color: #f87338;
}

.created_content .created_content_list .list_box .right .add_content {
  height: 4.5rem;
  line-height: 4.5rem;
  border: 1px dashed #f87338;
  display: inline-block;
  padding: 0 1.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
}

.created_content .created_content_list .list_box .right .add_content i {
  color: #f87338;
  font-weight: 700;
  margin-right: 0.5rem;
}

.exhibition {
  display: flex;
  justify-content: space-between;
  /* margin: 2rem 0; */
}

.exhibition_title {
  font-size: 1.6rem;
}

.exhibition_content {
  display: flex;
  flex-wrap: wrap;
  max-height: 10rem;
  height: 10rem;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  width: 100%;
  border-radius: 1rem;
  padding: 0.2rem;
  overflow: auto;
}

.exhibition_content div {
  display: flex;
  align-items: center;
  background-color: #fbf8f9;
  height: 3rem;
  padding: 0 0.4rem;
  margin: 0.4rem;
  color: #898582;
  font-size: 1.2rem;
  border-radius: 1rem;
}

.el-icon-warning-outline {
  font-size: 1.6rem;
  margin-left: 0.3rem;
}

>>> .right_boder .el-input__inner {
  border: 1px solid #ff0000 !important;
}

>>> .el-select {
  width: 100%;
  height: 4.5rem;
}

>>> .created_content .created_content_list .list_box .right .el-input {
  width: 100%;
  height: 4.5rem;
}

>>> .el-input__inner {
  cursor: pointer;
  padding-right: 35px;
  height: 100%;
}

>>> .el-input__icon {
  line-height: 3.5rem;
}

>>> .el-input__inner:focus {
  border-color: #f87338;
  outline: 0;
}

>>> .el-select .el-input.is-focus .el-input__inner {
  border-color: #f87338;
}

.el-select-dropdown__item.selected {
  color: #f87338 !important;
  font-weight: 700;
}

>>> .el-radio__input.is-checked + .el-radio__label {
  color: #f87338;
}

>>> .el-radio__input.is-checked .el-radio__inner {
  border-color: #f87338;
  background: #f87338;
}
</style>
